<template>
  <div class="region-rank-item-content">
    <table>
      <tr v-for="(item,index) in props.data" :key="index">
        <td><p class="index">{{index+1}}</p></td>
        <td><p class="name">{{item.region}}</p></td>
        <td>
          <div class="progress">
            <p :style="{'width':widthRate(item.number)}"></p>
          </div>
        </td>
        <td><p class="rank">{{item.number.toFixed(2)}}</p></td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, nextTick, onMounted } from 'vue'

defineOptions({
  name: 'RegionRankItem'
})

const props = defineProps({
  data: {
    type: Array,
    default: []
  }
})

const maxVal = ref(0);
watch(
  () => props.data,
  (val) => {
    let arr = val.map(i=>{
      return i.number
    })
    maxVal.value = Math.max.apply(null, arr)
    
  }
);
const widthRate = (val) => {
  let rate = val/maxVal.value * 100
  return rate.toFixed(2) + '%'
}
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.region-rank-item-content{
  background: #fff;
  color: #000000;
  margin-top: 12px;
  table{
    width: 100%;
  }
  td{
    height: 30px;
    >p,>div{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .index{
    font-family: DINPro;
    font-weight: medium;
    font-size: 15px;
    min-width: 20px;
  }
  .name{
    font-size: 13px;
    min-width: 45px;
    margin-right: 4px;
  }
  .progress{
    width: 195px;
    height: 14px;
    border-radius: 0px 14px 14px 0px;
    background: rgba(38, 208, 136, 0.1);
    padding: 0 3px 0 0;
    justify-content: start;
    p{
      width: 100%;
      height: 8px;
      border-radius: 0px 8px 8px 0px;
      background: linear-gradient(-90deg, #25CF88 0%, #5DE1A2 100%);
    }
  }
  .rank{
    margin-left: 5px;
    color: #26D088;
    font-family: DINPro;
    font-weight: bold;
    font-size: 16px;;
    justify-content: flex-end;
  }
  tr:nth-child(3),tr:nth-child(4),tr:nth-child(5),tr:nth-child(6),tr:nth-child(7){
    .progress{
      background: rgba(46, 138, 230, 0.1);
      p{
        background: linear-gradient(90deg, #66BFFF 0%, #2681FF 100%);
      }
    }
    .rank{
      color: #2E8AE6;
    }
  }
  tr:nth-child(8),tr:nth-child(9),tr:nth-child(10){
    .progress{
      background: rgba(254, 75, 62, 0.1);
      p{
        background: linear-gradient(90deg, #FF6A5E 0%, #FD493B 100%, #FF6E63 100%, #FF4935 100%);
      }
    }
    .rank{
      color: #FE4B3E;
    }
  }
  &.rank2{
    .name{
      min-width: 58px;
    }
    .progress{
      width: 165px;
    }
  }
}
</style>

